<template>
<!-- 职称等级 -->
  <div>
    <div>
      <el-input
        class="jminputAdd"
        size="small"
        placeholder="添加职称等级..."
        v-model="addjmObject.name"
      >
      </el-input>
      <el-select
        v-model="addjmObject.titleLevel"
        placeholder="职称等级"
        size="small"
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        size="small"
        @click="addJM"
        style="margin-left: 8px"
        >添加</el-button
      >
      <el-table
        border
        stripe
        :data="jm"
        style="width: 60%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="id" width="80"> </el-table-column>
        <el-table-column prop="name" label="职称名称" width="150">
        </el-table-column>
        <el-table-column prop="titleLevel" label="职称等级" width="150">
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" width="150">
        </el-table-column>
        <el-table-column prop="enabled" label="是否启用" width="200">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
            <el-tag v-else type="danger">未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editPostion(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <table>
          <tr>
            <td>
              <el-tag>职称名称</el-tag>
            </td>
            <td>
              <el-input
                v-model="updateJM.name"
                placeholder="请输入职称名称"
                size="small"
                style="width: 250px"
              ></el-input>
            </td>
          </tr>
          <tr>
            <!-- 职称等级下拉框 -->
            <td><el-tag>职称等级</el-tag></td>
            <td>
              <el-select
                v-model="updateJM.titleLevel"
                placeholder="职称等级"
                size="small"
                style="width: 250px; margin-top: 10px"
              >
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td><el-tag>是否启用</el-tag></td>
            <td>
              <!-- 滑块 -->
              <el-switch
                v-model="updateJM.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="已启用"
                inactive-text="未启用"
              >
              </el-switch>
            </td>
          </tr>
        </table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="clickUpdateJM">确 定</el-button>
        </span>
      </el-dialog>
      <el-button
        type="danger"
        style="margin-top: 10px"
        :disabled="this.handleSelectionArr.length == 0"
        @click="delectAll"
        >批量删除</el-button
      >
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  name: "JoblevelMana",
  data() {
    return {
      jm: {},
      addjmObject: {
        name: "",
        titleLevel: "",
      },
      options: ["正高级", "副高级", "中级", "初级", "员级"],
      dialogVisible: false,
      updateJM: {
        name: "",
        titleLevel: "",
        enabled: "",
      },
      handleSelectionArr: [],
    };
  },
  mounted() {
    this.innitJM();
  },
  methods: {
    handleSelectionChange(data) {
      this.handleSelectionArr = data;
    },
    innitJM() {
      this.getRequest("/system/basic/joblevel/").then((resp) => {
        if (resp) {
          this.jm = resp;
        }
      });
    },
    addJM() {
      if (
        this.addjmObject.name != null &&
        this.addjmObject.name != "" &&
        this.addjmObject.titleLevel != null &&
        this.addjmObject.titleLevel != ""
      ) {
        this.postRequest("/system/basic/joblevel/", this.addjmObject).then(
          (resp) => {
            if (resp) {
              this.innitJM();
              this.addjmObject.name = "";
              this.addjmObject.titleLevel = "";
            } else {
              this.$message.error("添加失败");
            }
          }
        );
      } else {
        this.$message.error("添加失败,存在空值");
      }
    },
    handleDelete(index, data) {
      this.$confirm(
        "此操作将永久删除" + data.name + "," + "是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/system/basic/joblevel/", data.id).then(
            (resp) => {
              if (resp) {
                this.innitJM();
              } else {
                this.$message.error("删除失败");
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editPostion(index, data) {
      this.dialogVisible = true;
      Object.assign(this.updateJM, data);
      this.updateJM.createDate = "";
    },
    clickUpdateJM() {
      this.putRequest("/system/basic/joblevel/", this.updateJM).then((resp) => {
        if (resp) {
          this.innitJM();
          this.dialogVisible = false;
        }
      });
    },
    //批量删除
    delectAll() {
      this.$confirm(
        "此操作将永久删除" +
          "[" +
          this.handleSelectionArr.length +
          "]" +
          "条" +
          "," +
          "是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let ids = "?";
          this.handleSelectionArr.forEach((element) => {
            ids += "ids=" + element.id + "&";
          });
          this.deleteRequest("/system/basic/joblevel/", ids).then((resp) => {
            if (resp) {
              this.innitJM();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.jminputAdd {
  width: 300px;
  margin-right: 8px;
}
</style>
